import React, { useState, useEffect, useMemo } from 'react'
import axios from 'axios'
// 自定义hook:用于复用js逻辑，把js抽出来做出一个函数，使得结构清晰
function useCinemaList(){
    const [cinemaList, SetcinemaList] = useState([])
    useEffect(() => {
        axios({
            url: "https://m.maizuo.com/gateway?cityId=440300&ticketFlag=1&k=8621223",
            method: "get",
            headers: {
                'X-Client-Info': '{ "a": "3000", "ch": "1002", "v": "5.2.0", "e": "16588855641625945769246721", "bc": "440300" }',
                'X-Host': 'mall.film-ticket.cinema.list'
            }
        }).then(res => {
            SetcinemaList(res.data.data.cinemas)

        }).catch(err => {
            console.log(err);
        })
    }, [])
    return{cinemaList}
}
function useFilter(cinemaList,mytext){
    const getCinemaList =useMemo(() => cinemaList.filter(item => item.name.toUpperCase().includes(mytext.toUpperCase()) || item.address.toUpperCase().includes(mytext.toUpperCase())),[cinemaList,mytext])
    return {getCinemaList}
}
export default function Cinema() {
    
    const [mytext, Setmytext] = useState("")
    const {cinemaList}=useCinemaList()

    const  {getCinemaList}  = useFilter(cinemaList,mytext)
    return (
        <div>
            <div>
                <input type="text" value={mytext} onChange={
                    (e) => {
                        Setmytext(e.target.value)
                    }
                } />
                <div className='wrapper' style={{ height: '500px', overflow: "hidden" }}>
                    <div className='content'>
                        {
                            getCinemaList.map(item =>
                                <dl key={item.cinemaId}>
                                    <dt>{item.name}</dt>
                                    <dd>{item.address}</dd>
                                </dl>
                            )
                        }
                    </div>
                </div>
            </div>
        </div>
    )
}
